<template>
	<view class="listType">
		<view class="title">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="listType" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
		</view>
		<view class="content">
			<view class="" v-if="current == 0">
				<view class="nodata" v-if="allOrderList.length==0">
					<image class="image" src="../../../static/common/noimg.png" mode="widthFix"></image>
				</view>
				<view class="list" v-for="(item,index) in allOrderList" key="index">
					<view class="subTitle">
						<text class="name">{{item.productCatList[0].productName}}</text>
						<text class="status" v-if="item.orderStatus==0">待付款</text>
						<text class="status" v-if="item.orderStatus==1">待派单</text>
						<text class="status" v-if="item.orderStatus==2">已派单</text>
						<text class="status" v-if="item.orderStatus==8">已完成</text>
						<text class="status" v-if="item.orderStatus==7">已取消</text>
					</view>
					<view class="info">
						<image class="icon" :src="item.productCatList[0].pictureUrl" mode="widthFix"></image>
						<view class="substance">
							<view class="introduce">
								{{item.productCatList[0].title}}
							</view>
							<view class="row">
								<view class="price">
									¥{{item.productCatList[0].totalPrice}}
								</view>
								<view class="number">
									{{item.productCatList[0].totalNum}}
								</view>

							</view>
							<view class="checkInfo" @click="checkInfo(item)">
								<text>查看详情</text>

							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="" v-if="current == 1">
				
				<view class="nodata" v-if="unpaidList.length==0">
					<image class="image" src="../../../static/common/noimg.png" mode="widthFix"></image>
				</view>
				<view class="list" v-for="(item,index) in unpaidList" key="index">
					<view class="subTitle">
						<text class="name">{{item.productCatList[0].productName}}</text>
						<text class="status">待付款</text>
					</view>
					<view class="info">
						<image class="icon" :src="item.productCatList[0].pictureUrl" mode="widthFix"></image>
						<view class="substance">
							<view class="introduce">
								{{item.productCatList[0].title}}
							</view>
							<view class="row">
								<view class="price">
									¥{{item.productCatList[0].totalPrice}}
								</view>
								<view class="number">
									{{item.productCatList[0].totalNum}}
								</view>
				
							</view>
							<view class="checkInfo" @click="checkInfo(item)">
								<text>查看详情</text>
				
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="current == 2">
				<view class="nodata" v-if="tobeShippedList.length==0">
					<image class="image" src="../../../static/common/noimg.png" mode="widthFix"></image>
					
				</view>
				<view class="list" v-for="(item,index) in tobeShippedList" key="index">
					<view class="subTitle">
						<text class="name">{{item.productCatList[0].productName}}</text>
						<text class="status">待派单</text>
					</view>
					<view class="info">
						<image class="icon" :src="item.productCatList[0].pictureUrl" mode="widthFix"></image>
						<view class="substance">
							<view class="introduce">
								{{item.productCatList[0].title}}
							</view>
							<view class="row">
								<view class="price">
									¥{{item.productCatList[0].totalPrice}}
								</view>
								<view class="number">
									{{item.productCatList[0].totalNum}}
								</view>
				
							</view>
							<view class="checkInfo" @click="checkInfo(item)">
								<text>查看详情</text>
				
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="current == 3">
				<view class="nodata" v-if="tobeEvaluatedList.length==0">
					<image class="image" src="../../../static/common/noimg.png" mode="widthFix"></image>
					<text class="remind">您还没有订单哦~</text>
				</view>
				<view class="list" v-for="(item,index) in tobeEvaluatedList" key="index">
					<view class="subTitle">
						<text class="name">{{item.productCatList[0].productName}}</text>
						<text class="status">已派单</text>
					</view>
					<view class="info">
						<image class="icon" :src="item.productCatList[0].pictureUrl" mode="widthFix"></image>
						<view class="substance">
							<view class="introduce">
								{{item.productCatList[0].title}}
							</view>
							<view class="row">
								<view class="price">
									¥{{item.productCatList[0].totalPrice}}
								</view>
								<view class="number">
									{{item.productCatList[0].totalNum}}
								</view>
				
							</view>
							<view class="checkInfo" @click="checkInfo(item)">
								<text>查看详情</text>
				
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="current == 4">
				<view class="nodata" v-if="tobeReceivedList.length==0">
					<image class="image" src="../../../static/common/noimg.png" mode="widthFix"></image>
				</view>
				<view class="list" v-for="(item,index) in tobeReceivedList" key="index">
					<view class="subTitle">
						<text class="name">{{item.productCatList[0].productName}}</text>
						<text class="status">已完成</text>
					</view>
					<view class="info">
						<image class="icon" :src="item.productCatList[0].pictureUrl" mode="widthFix"></image>
						<view class="substance">
							<view class="introduce">
								{{item.productCatList[0].title}}
							</view>
							<view class="row">
								<view class="price">
									¥{{item.productCatList[0].totalPrice}}
								</view>
								<view class="number">
									{{item.productCatList[0].totalNum}}
								</view>
				
							</view>
							<view class="checkInfo" @click="checkInfo(item)">
								<text>查看详情</text>
				
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		onMounted
	} from "vue";
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	const openId=ref()
	const current = ref(0)
	const listType = ref(['全部', '待付款', '待派单', '已派单', '已完成'])
	const styleType = ref('text')
	const activeColor = ref('#ED2B30')
	const allOrderList=ref([])
	const tobeReceivedList=ref([])//2
	const unpaidList=ref([]) //0
	const tobeShippedList=ref([])//1
	const tobeEvaluatedList=ref([])//3
	onShow(() => {
			
			getOrderList()
		})
	onLoad((options) => {  //获取路由参数
		console.log(options.type)
		if(options.type){
			current.value = Number(options.type)+1
		}
		

	})
	const getOrderList=()=>{
		proxy.sjuRequest.request("/api/weChatMall/order/getOrders/" + proxy.sjuLogin.getValue("miaoMaGJOpenid"), 'post').then(res => {
			console.log(res)
			allOrderList.value= res.data.allList
			tobeReceivedList.value= res.data.tobeReceivedList
			unpaidList.value= res.data.unpaidList
			tobeShippedList.value= res.data.tobeShippedList
			tobeEvaluatedList.value= res.data.tobeEvaluatedList
			console.log(tobeShippedList.value.length)
			console.log(allOrderList.value)
			
		})
	}
	const onClickItem = (e) => {
		console.log(e)
		console.log(tobeShippedList.value)
		current.value = e.currentIndex
	}
	const checkInfo =(item)=>{		
		 proxy.sjuNav.navigateTo('/my/orderInfo?orderNo='+item.orderNo)
	}
</script>

<style lang="scss">
	.listType {
		width: 100%;
		height: 100%;
		background-color: #FAFAFA;

		.title {
			width: 100%;
			height: 36px;
			background-color: #fff;
		}

		.content {
			margin-top: 20rpx;
			padding: 0 10rpx;
			box-sizing: border-box;

			.list {
				margin-top: 10px;
				width: 100%;
				// height: 250rpx;
				padding: 20rpx;
				padding-bottom: 40rpx;
				background-color: #fff;
				border-radius: 5px;
				box-sizing: border-box;

				.subTitle {
					height: 30px;
					line-height: 30px;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					font-size: 30rpx;
					.name {						
						color: #949494;
					}
					.status {
						// font-size: 28rpx;
						color: #D43635;
					}
				}

				.info {
					margin-top: 20rpx;
					display: flex;
					flex-wrap: nowrap;

					// justify-content:space-between;
					image {
						width: 80px;
					}

					.substance {
						// width:60%;
						width: calc(100% - 80px);
						padding-left: 40rpx;

						.introduce {
							width: 100%;
							font-size: 24rpx;
							box-sizing: border-box;
							// overflow: hidden;
							// white-space: nowrap;
							// -webkit-box-orient: vertical;
							// text-overflow: ellipsis;
							// webkit-line-clamp: 2;

							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;

						}


						.row {
							display: flex;
							flex-wrap: nowrap;
							justify-content: space-between;
							height: 35px;
							line-height: 35px;

							.price {
								font-size: 32rpx;
								color: #D43635;
								font-weight: bold;
							}

							.number {
								font-size: 22rpx;
								color: #CACACA;
							}
						}

						.checkInfo {
							display: flex;
							// align-self:flex-end;
							justify-content: flex-end;

							text {
								padding: 15rpx 25rpx;
								border: 1px solid #979797;
								border-radius: 40rpx;
								color:#979797 ;
							}
						}

					}
				}
			}
		}
	}
	.nodata{
		width:100%;
		height: auto;
		.image{
			width:60%;
			margin: 20% 20% 0 20%;
		}
		.remind{
			display: block;
			font-size: 14px;
			margin-top:30px;
			text-align: center;
		}
		
	}
</style>